<template>
    <div>
        <h1>测试异步调度弹框组件</h1>
        <AsyncDialog
            :action="asyncTask"
            :visible.sync="dialogVisible"
            :selectedList="selectedList"
            type="table"
        >
            <template slot="default" slot-scope="{options}">
                <el-table
                    :data="options"
                    max-height="650"
                    border
                    tooltip-effect="light"
                    style="width: 100%"
                    >
                        <el-table-column show-overflow-tooltip prop="sn" label="编号" />
                        <el-table-column show-overflow-tooltip prop="status_zn" label="执行状态">
                            <template slot-scope="item">
                                {{ obj[item.row.status_zn] }}
                            </template>
                        </el-table-column>
                        <async-table-column show-overflow-tooltip prop="async" label="异步column组件" :action="test" />
                </el-table>
            </template>
        </AsyncDialog>
        <el-button size="mini" type="primary" @click="dialogVisible = true">
            点击打开 Dialog
        </el-button>
    </div>
</template>

<script>
import { Button, TableColumn } from "element-ui";
import { ajaxMethod } from './utils'
import { AsyncDialog, AsyncTableColumn } from "../src";
export default {
    components: {
        AsyncDialog,
        AsyncTableColumn,
        [Button.name]: Button,
        [TableColumn.name]: TableColumn,
    },
    data() {
        return {
            dialogVisible: false,
            selectedList: [
                {
                    sn: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄3",
                    status_zn: '1',
                    async: '1'
                },
                {
                    sn: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄2",
                    status_zn: '12',
                    async: '2'
                },
                {
                    sn: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄1",
                    status_zn: '41',
                    async: '3'
                },
                {
                    sn: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                    status_zn: '16',
                    async: '4'
                }
            ],
            obj: {
                '1': '待处理',
                '2': '成功',
                '3': "失败"
            },
            index: 0
        };
    },
    methods: {
        async test(row) {
            await this.delay(Math.random() * 10 + 1000);
            console.log('test', row)
            return Promise.resolve("123");
        },
        async test1(row) {
            await this.delay(Math.random() * 10 + 1000);
            console.log('test1', row)
            return Promise.resolve("123");
        },
        async test2(row) {
            await this.delay(Math.random() * 10 + 1000);
            console.log('test2', row)
            return Promise.resolve("123");
        },
        delay(time) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve();
                }, time);
            });
        },
        async asyncTask() {
            await this.delay(1000);
            return ajaxMethod('GET','http://localhost:9527/data.json').then(() => {
                this.selectedList[this.index]['status_zn'] = '2'
                this.index += 1;
            }).catch((err) => {
                console.log(err)
            })
        },
        log(item, slotProps) {
            console.log(item, slotProps)
        }
    },
};
</script>
